<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="materialAddWinDialogVisible"
      title="添加物料/产品"
      width="70%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="newMaterial"  label-width="auto">

        <el-form-item style="font-weight: bold;width: 380px;float: left;" label="物料编码">
          <el-input v-model="newMaterial.materialCode"/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 400px;margin-left: 600px" label="物料名称">
          <el-input v-model="newMaterial.materialName"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="规格型号">
          <el-input v-model="newMaterial.specification" type="textarea"/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 300px;float: left;" label="单位">
          <el-select v-model="newMaterial.materialUnitCode">
            <el-option v-for="unit in units" :value="unit.unitCode" :label="unit.unitName"/>
          </el-select>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 300px;margin-left: 600px" label="物料/产品分类">
          <el-tree-select
              v-model="newMaterial.kindId"
              :data="classifys"
              :props="defaultProps"
              node-key="classifyId"
              :check-strictly="true"
              @change="handleSelectChange"
          />
        </el-form-item>

        <el-form-item style="font-weight: bold;float: left" label="是否启用">
          <el-radio-group v-model="newMaterial.materialStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="font-weight: bold;margin-left: 600px" label="安全库存">
          <el-radio-group v-model="newMaterial.safeFlag">
            <el-radio :label=1>是</el-radio>
            <el-radio :label=2>否</el-radio>
          </el-radio-group>
        </el-form-item>

        <template v-if="newMaterial.safeFlag === 1">
          <el-form-item style="font-weight: bold;float: left" label="最小库存量">
            <el-input-number style="width: 220px" min="0" v-model="newMaterial.minStock"/>
          </el-form-item>
          <el-form-item style="font-weight: bold;margin-left: 600px" label="最大库存量">
            <el-input-number style="width: 220px" min="0" v-model="newMaterial.maxStock"/>
          </el-form-item>
        </template>

        <el-form-item style="font-weight: bold" label="备注">
          <el-input v-model="newMaterial.materialRemark" type="textarea"/>
        </el-form-item>

      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelnewMaterial">取消</el-button>
        <el-button type="primary" @click="newMaterialSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {ElMessage} from "element-plus";
import materialRequest from "@/api/material.js";
import classifyRequest from "@/api/classify.js";
import unitRequest from "@/api/unit.js";
// 查询的单位列表
let units = ref([]);
// 定义数组保存所有分类信息
let classifys = ref([]);

// 申明这个组件的事件  editComplete
const emits = defineEmits(['addComplete','cancelMaterialAdd'])

// 弹窗标记
let materialAddWinDialogVisible = ref(false);

let props = defineProps(["isShow"]);
// 编辑的单位对象
let newMaterial = ref({materialStatus:1,safeFlag:2,minStock:0,maxStock:0});

// 设置 el-tree-select 的 props
const defaultProps = {
  children: 'children',
  label: 'classifyName',
  value: 'classifyId' // 使用 classifyId 作为节点的值
};

// 处理选择变化的函数
function handleSelectChange(value, data) {
  console.log('Selected value:', value);
}

/**
 * 取消新增按钮事件
 */
function cancelnewMaterial(){
  newMaterial = ref({materialStatus:1,safeFlag:2,minStock:0,maxStock:0});
  materialAddWinDialogVisible.value = false;
  emits("cancelMaterialAdd")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  cancelnewMaterial();
  emits("cancelMaterialAdd")
}

/**
 * 新增提交
 */
function newMaterialSubmit(){
  classifyRequest.selectById(newMaterial.value.kindId,res => {
    // 更新 newMaterial 的值
    newMaterial.value.kindType = res.data.classifyType;
    newMaterial.value.kindName = res.data.classifyName;
    materialRequest.save(newMaterial.value,res=>{
      if(res.code === 200){
        ElMessage({
          type:"success",
          message:"新增物料成功"
        });
        // 关闭弹窗
        cancelnewMaterial();
        // 触发编辑完成的事件
        emits('addComplete',res.data);
      }else if (res.data == '物料编码不能为空') {
        ElMessage({
          type:"warning",
          message:"物料编码不能为空"
        });
      } else if (res.data == '物料名称不能为空') {
        ElMessage({
          type:"warning",
          message:"物料名称不能为空"
        });
      } else if (res.data == '单位必须选其一') {
        ElMessage({
          type:"warning",
          message:"单位必须选其一"
        });
      } else if (res.data == '物料/产品分类必须选其一') {
        ElMessage({
          type:"warning",
          message:"物料/产品分类必须选其一"
        });
      } else {
        ElMessage({
          type:"warning",
          message:"新增物料失败"
        });
      }
    })
  });
}

/**
 * 侦听器 侦听 props.isShow
 */
watch(()=>props.isShow,()=>{
  materialAddWinDialogVisible.value = props.isShow;
});


onMounted(()=>{
  // 加载单位对象
  unitRequest.ListUnits(res => {
    // 将查询的列表赋值给units
    units.value = res.data;
  })
  // 加载分类对象
  classifyRequest.getTree(0,res=>{
    classifys.value = res.data;
  })
})
</script>
<style scoped>

</style>